// src/composables/useScrollTrigger.js
import { onMounted, ref } from 'vue'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger) // 注册 ScrollTrigger 插件

export function useScrollTrigger(targetRef, animationFn) {
  const isActive = ref(false)
  onMounted(() => {
    ScrollTrigger.create({
      trigger: targetRef.value, // 监听的目标元素
      start: 'top 80%', // 当元素顶部进入视口 80% 时触发
      onEnter: () => {
        if (!isActive.value) {
          animationFn()
          isActive.value = true
        }
      },
      // 可选：滚动回去时重置（适合重复触发）
      onLeaveBack: () => {
        isActive.value = false
      },
    })
  })

  return { isActive }
}
